<template>
  <div class="dashboard-container">
    <div class="box">
      <div ref="vantaRef" style="width: 100%; height: 700px"></div>
      <div class="banner">
        <h1>鸟枪干大炮 博客</h1>
        <h6>
          &ensp;&ensp;xl&ensp;&ensp;&ensp;6667&ensp;&ensp;&ensp;&ensp;bo&ensp;&ensp;&ensp;&ensp;&ensp;ke
        </h6>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import * as THREE from "three";
import BIRDS from "vanta/src/vanta.birds";

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.BIRDS({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      color1: 14381274,
      color2: 16443110,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin-left: 20px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }

}
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 10%;
    left: 10%;
    color: #fff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>
